<script lang="ts" setup>
import type { IJadeInfo } from "@/api/info/type";
import FormTabs from "@/components/forms/form-tabs.vue";
import { useBasicInfoStore, useCharacterStore, useConfigStore } from "@/store";
import { getFloat, getImage } from "@/utils";
const tabs = [
  { id: 0, label: "装备" },
  { id: 1, label: "时装/宠物" }
];

const infoStore = useBasicInfoStore();
const charStore = useCharacterStore();
const configStore = useConfigStore();

const list = infoStore.detailList;

const curTab = ref(0);
const curPosotion = ref("武器");
const curPosotionID = ref(12);

const curInfo = computed(
  () =>
    list[curTab.value].find((a) => a.value == curPosotion.value)?.detail ?? []
);

const changePosion = (p) => {
  curPosotion.value = p.value;
  curPosotionID.value = p.id;
};

const emblem_list = computed(() => {
  return (
    infoStore.details?.emblem?.filter((item) =>
      item.position.includes(curPosotion.value)
    ) ?? []
  );
});

const currentInfo = function<T>(name: string, defaultValue?: T) {
  return computed<string | number>({
    get() {
      return configStore.getForge(curPosotion.value, name) ?? defaultValue ?? 0;
    },
    set(val) {
      if (val == undefined) {
        return;
      }
      if (name == "growth_first") {
        configStore.setForge(curPosotion.value, "growth_second", val);
        configStore.setForge(curPosotion.value, "growth_third", val);
        configStore.setForge(curPosotion.value, "growth_fourth", val);
      }
      if (name == "growth_cs_first") {
        configStore.setForge(curPosotion.value, "growth_cs_second", val);
        configStore.setForge(curPosotion.value, "growth_cs_third", val);
        configStore.setForge(curPosotion.value, "growth_cs_fourth", val);
      }
      configStore.setForge(curPosotion.value, name, val);
    }
  });
};

const equipInfo = function<T>(part: string, name: string, defaultValue?: T) {
  return computed<string | number>({
    get() {
      return configStore.getForge(part, name) ?? defaultValue ?? 0
    },
    set(val) {
      if (val == undefined) {
        return
      }
      configStore.setForge(part, name, val)
    }
  })
}

// 附魔
const enchanting = currentInfo<string | number>("enchanting");

// 镶嵌栏1
const socket_left = currentInfo<string | number>("socket_left", 0);

// 镶嵌栏2
const socket_right = currentInfo<string | number>("socket_right");

// 增幅
const cursed_type = currentInfo<string | number>("cursed_type", 1);

// 增幅数值
const cursed_number = currentInfo<string | number>("cursed_number");

// 锻造数值
const dz_number = currentInfo<string | number>("dz_number");

// 成长1
const growth = currentInfo<string | number>("growth_first", 80);

// 成长1
const growth_cs = currentInfo<string | number>("growth_cs_first", 70);

const growth_sj = currentInfo<string | number>("growth_sj", 40);

// 红
const red = equipInfo("宠物装备-红", "enchanting")
// 绿
const green = equipInfo("宠物装备-绿", "enchanting")
// 蓝
const blue = equipInfo("宠物装备-蓝", "enchanting")


// 辟邪玉
const jade_First_type = equipInfo("jade", "jade_First_type", 0)
const jade_First_value = equipInfo("jade", "jade_First_value", 0)

const jade_Second_type = equipInfo("jade", "jade_Second_type", 0)
const jade_Second_value = equipInfo("jade", "jade_Second_value", 0)

const jade_Third_type = equipInfo("jade", "jade_Third_type", 0)
const jade_Third_value = equipInfo("jade", "jade_Third_value", 0)

const jade_Fourth_type = equipInfo("jade", "jade_Fourth_type", 0)
const jade_Fourth_value = equipInfo("jade", "jade_Fourth_value", 0)

function currentOptions(position: string) {
  return computed(() => (infoStore.details?.sundries.filter(item => item.position.includes(position)) ?? []).map(a => {
    return { text: a.props, value: a.id }
  }))
}

// 勋章品质
const quality = equipInfo("others", "medal_quality", 5)
const quality_m = ["普通", "高级", "稀有", "神器", "传说", "史诗"]
const quality_g = ["普通", "高级", "稀有", "神器", "传说"]

const lv = equipInfo("others", "medal_lv", 12)
const gems_1 = equipInfo("others", "medal_gems_1", 4)
const gems_2 = equipInfo("others", "medal_gems_2", 4)
const gems_3 = equipInfo("others", "medal_gems_3", 4)
const gems_4 = equipInfo("others", "medal_gems_4", 4)


// 冒险团等级
// const mxtLV = equipInfo("others", "mxtLV")
// const mxtLV_list = currentOptions("冒险团")

// 婚房
const HF = equipInfo("others", "HF")
const HF_list = currentOptions("婚房")
// 婚戒
const HJ = equipInfo("others", "HJ")
const HJ_list = currentOptions("婚戒")
// 收集箱种类
const SJX_TYPE = equipInfo("others", "SJX_TYPE")
const SJX_TYPE_list = currentOptions("收集箱")
// 晶体契约
const JTQY = equipInfo("others", "JTQY", 0)
const JTQY_list = currentOptions("晶体契约")
// 收集箱稀有
const SJX_XY = equipInfo("others", "SJX_XY")
// 收集箱神器
const SJX_SQ = equipInfo("others", "SJX_SQ")

// 名称装扮卡
const MCZBK = currentInfo("MCZBK")
const MCZBK_list = currentOptions("名称装扮卡")

const valueList = computed(() => {
  return function (id: number = -1) {
    if (id == -1) {
      return undefined
    } else {
      const res = []
      const cur = infoStore.details?.jade?.find(e => e.id == id) as IJadeInfo
      if (cur) {
        const { max, min, unit, pre } = cur
        //
        if (pre == 0) {
          res.push({
            value: 1,
            text: unit
          })
        } else {
          for (let i = Number(max) as number; i >= Number(min);) {
            if (i != 0) {
              res.push({
                value: getFloat(i, 1),
                text: (i > 0 ? "+" : "") + getFloat(i, 1) + unit
              })
            }
            i = Number((i - Number(pre)).toFixed(1))
          }
        }
        return res
      }
    }
  }
})
</script>

<template>
  <view class="detail-box">
    <view class="eq-panel" :style="{ backgroundImage: `url('${getImage('common/head.png')}')` }">
      <view class="eq-panel-inner">
        <view
          v-for="(p, i) in list[curTab]"
          :key="i"
          class="eq-item-box"
          :class="{ fwq: p.id == 15 }"
          :style="`top: ${p.top}px; ${p.type}: ${p.left}px;`"
          @tap="changePosion(p)"
        >
          <view
            class="eq-icon-box"
            :class="{ current: p.value == curPosotion }"
            @tap="changePosion(p.value)"
          />
          <view class="eq-pos-label">
            {{ p.label }}
          </view>
        </view>

        <!-- <uni-data-select
          v-if="currentTab == 0"
          v-model="currDfs"
          dark
          class="dfs-selector"
          :clear-icon="false"
          placeholder="预设"
          :localdata="dfs"
          @change="onchangeDfs"
        /> -->
      </view>
    </view>
    <view class="" style="width: 100%">
      <FormTabs v-model:value="curTab" style="width: 100%" :tabs="tabs" />
    </view>
    <view
      v-if="
        curInfo?.includes('cursed_number') || curInfo?.includes('dz_number')
      "
      class="detail-item"
    >
      <view class="detail-title">
        强化 / 增幅 / 锻造
      </view>
      <view class="detail-inner">
        <view v-if="curInfo?.includes('dz_number')" class="inner-item">
          <uni-data-select
            v-model="dz_number"
            style="width: 100%"
            dark
            :clear-icon="false"
            placeholder="锻造"
            :localdata="
              Array.from({ length: 9 }, (_, index) => {
                return { text: `锻造 +${index}`, value: index };
              })
            "
          />
        </view>
        <view class="inner-item">
          <view class="w-49%">
            <uni-data-select
              v-model="cursed_type"
              dark
              :clear-icon="false"
              placeholder="增幅类型"
              :localdata="[
                { text: '增幅', value: 1 },
                { text: '强化', value: 2 }
              ]"
            />
          </view>
          <view class="w-49% ml-2%">
            <uni-data-select
              v-model="cursed_number"
              dark
              :clear-icon="false"
              placeholder="数值"
              :localdata="
                Array.from({ length: 21 }, (_, index) => {
                  return { text: `+${index}`, value: index };
                })
              "
            />
          </view>
        </view>
      </view>
    </view>
    <view class="detail-item">
      <view class="detail-title">
        打造
      </view>
      <view class="detail-inner">
        <view
          v-if="curInfo?.includes('enchanting')"
          class="flex items-center justify-center inner-item w-100%"
        >
          <uni-data-select
            v-model="enchanting"
            dark
            class="flex-1"
            :clear-icon="false"
            :placeholder="curPosotionID > 100 ? '属性' : '附魔'"
            :localdata="
              (
                charStore.enchanting.filter((a) =>
                  a.position.includes(curPosotion)
                ) ?? []
              ).map((a) => {
                return {
                  text: `${curPosotionID > 100 ? '属性' : '附魔'}：${a.props}`,
                  value: a.id
                };
              })
            "
          />
        </view>
        <view
          v-if="curInfo?.includes('socket_left')"
          class="flex items-center justify-center inner-item w-100%"
        >
          <uni-data-select
            v-model="socket_left"
            dark
            class="flex-1"
            :clear-icon="false"
            placeholder="徽章"
            :localdata="
              emblem_list.map((a) => {
                return { text: `徽章：${a.props}`, value: a.id };
              })
            "
          />
        </view>
        <view
          v-if="curInfo?.includes('socket_right')"
          class="flex items-center justify-center inner-item w-100%"
        >
          <uni-data-select
            v-if="curInfo?.includes('socket_right')"
            v-model="socket_right"
            class="flex-1"
            dark
            :clear-icon="false"
            placeholder="徽章"
            :localdata="
              emblem_list.map((a) => {
                return { text: `徽章：${a.props}`, value: a.id };
              })
            "
          />
        </view>
        <view
          v-if="curInfo?.includes('growth')"
          class="flex items-center justify-center inner-item"
        >
          <uni-data-select
            v-model="growth"
            class="flex-1"
            dark
            :clear-icon="false"
            placeholder="成长属性"
            :localdata="
              Array.from({ length: 80 }, (_, index) => {
                return { text: `成长 Lv${index + 1}`, value: index + 1 };
              })
            "
          />
          <uni-data-select
            v-model="growth_sj"
            class="ml-2px flex-1"
            dark
            :clear-icon="false"
            placeholder="神界等级"
            :localdata="
              Array.from({ length: 40 }, (_, index) => {
                return { text: `神界 Lv${index + 1}`, value: index + 1 };
              })
            "
          />
          <uni-data-select
            v-model="growth_cs"
            class="ml-2px flex-1"
            dark
            :clear-icon="false"
            placeholder="传说等级"
            :localdata="
              Array.from({ length: 70 }, (_, index) => {
                return { text: `传说 Lv${index + 1}`, value: index + 1 };
              })
            "
          />
        </view>
        <view
          v-if="curInfo?.includes('dress')"
        >
          <uni-data-select
            v-model="configStore.dress_set[curPosotion].id"
            class="flex-1 inner-item"
            dark
            :clear-icon="false"
            placeholder="时装品质"
            :localdata="(charStore.dress[curPosotion] ?? []).map(a => { return { text: a.name, value: a.id } })"
          />
          <uni-data-select
            v-model="configStore.dress_set[curPosotion].option"
            class="flex-1 inner-item"
            dark
            :clear-icon="false"
            placeholder="时装属性"
            :localdata="[{ text: '其他', value: 0 }, ...((charStore.dress[curPosotion] ?? []).filter(a => a.id == configStore.dress_set[curPosotion].id)?.[0]?.options ?? []).map(a => { return { text: a, value: a } })]"
          />
        </view>
        <view
          v-if="curInfo?.includes('pet')"
        >
          <uni-data-select
            v-model="red"
            dark
            class="flex-1 inner-item mt-12px"
            :clear-icon="false"
            placeholder="红色宠物装备"
            :localdata="
              (
                charStore.enchanting.filter((a) =>
                  a.position.includes('宠物装备-红')
                ) ?? []
              ).map((a) => {
                return {
                  text: `红：${a.props}`,
                  value: a.id
                };
              })
            "
          />
          <uni-data-select
            v-model="green"
            dark
            class="flex-1 inner-item"
            :clear-icon="false"
            placeholder="绿色宠物装备"
            :localdata="
              (
                charStore.enchanting.filter((a) =>
                  a.position.includes('宠物装备-绿')
                ) ?? []
              ).map((a) => {
                return {
                  text: `绿：${a.props}`,
                  value: a.id
                };
              })
            "
          />
          <uni-data-select
            v-model="blue"
            dark
            class="flex-1 inner-item"
            :clear-icon="false"
            placeholder="蓝色宠物装备"
            :localdata="
              (
                charStore.enchanting.filter((a) =>
                  a.position.includes('宠物装备-蓝')
                ) ?? []
              ).map((a) => {
                return {
                  text: `蓝：${a.props}`,
                  value: a.id
                };
              })
            "
          />
        </view>
        <view
          v-if="curInfo?.includes('jade')"
        >
          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="jade_First_type"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="辟邪玉属性"
              :localdata="[{ text: '无', value: 0 }, ...infoStore.details?.jade?.map(a => { return { text: a.props, value: a.id } })]"
            />
            <uni-data-select
              v-model="jade_First_value"
              dark
              class="flex-1 ml-5px"
              :clear-icon="false"
              placeholder="辟邪玉数值"
              :localdata="valueList(Number(jade_First_type))"
            />
          </view>
          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="jade_Second_type"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="辟邪玉属性"
              :localdata="[{ text: '无', value: 0 }, ...infoStore.details?.jade?.map(a => { return { text: a.props, value: a.id } })]"
            />
            <uni-data-select
              v-model="jade_Second_value"
              dark
              class="flex-1 ml-5px"
              :clear-icon="false"
              placeholder="辟邪玉数值"
              :localdata="valueList(Number(jade_Second_type))"
            />
          </view>
          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="jade_Third_type"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="辟邪玉属性"
              :localdata="[{ text: '无', value: 0 }, ...infoStore.details?.jade?.map(a => { return { text: a.props, value: a.id } })]"
            />
            <uni-data-select
              v-model="jade_Third_value"
              dark
              class="flex-1 ml-5px"
              :clear-icon="false"
              placeholder="辟邪玉数值"
              :localdata="valueList(Number(jade_Third_type))"
            />
          </view>
          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="jade_Fourth_type"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="辟邪玉属性"
              :localdata="[{ text: '无', value: 0 }, ...infoStore.details?.jade?.map(a => { return { text: a.props, value: a.id } })]"
            />
            <uni-data-select
              v-model="jade_Fourth_value"
              dark
              class="flex-1 ml-5px"
              :clear-icon="false"
              placeholder="辟邪玉数值"
              :localdata="valueList(Number(jade_Fourth_type))"
            />
          </view>
        </view>
        <view
          v-if="curInfo?.includes('medal')"
        >
          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="quality"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="勋章品质"
              :localdata="quality_m.map((item, index) => { return { text: `勋章品质:${item}`, value: index } })"
            />
            <uni-data-select
              v-model="lv"
              dark
              class="flex-1 ml-5px"
              :clear-icon="false"
              placeholder="勋章强化"
              :localdata=" Array.from({ length: 13 }, (_, index) => {
                return { text: `勋章强化 +${index}`, value: index };
              })"
            />
          </view>
          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="gems_1"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="宝石1"
              :localdata="quality_g.map((item, index) => { return { text: `宝石1:${item}`, value: index } })"
            />
            <uni-data-select
              v-model="gems_2"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="宝石2"
              :localdata="quality_g.map((item, index) => { return { text: `宝石2:${item}`, value: index } })"
            />
            <uni-data-select
              v-model="gems_3"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="宝石3"
              :localdata="quality_g.map((item, index) => { return { text: `宝石3:${item}`, value: index } })"
            />
            <uni-data-select
              v-model="gems_4"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="宝石4"
              :localdata="quality_g.map((item, index) => { return { text: `宝石4:${item}`, value: index } })"
            />
          </view>
          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="gems_3"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="宝石3"
              :localdata="quality_g.map((item, index) => { return { text: `宝石3:${item}`, value: index } })"
            />
            <uni-data-select
              v-model="gems_4"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="宝石4"
              :localdata="quality_g.map((item, index) => { return { text: `宝石4:${item}`, value: index } })"
            />
          </view>
        </view>
        <view
          v-if="curInfo?.includes('others')"
        >
          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="HF"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="婚房"
              :localdata="[{ text: '婚房:无', value: 0 }, ...HF_list.map(a => { return { text: `婚房:${a.text}`, value: a.value } })]"
            />
          </view>
          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="HJ"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="婚戒"
              :localdata="[{ text: '婚戒:无', value: 0 }, ...HJ_list.map(a => { return { text: `婚戒:${a.text}`, value: a.value } })]"
            />
          </view>
          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="SJX_TYPE"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="收集箱种类"
              :localdata="[{ text: '收集箱:无', value: 0 }, ...SJX_TYPE_list.map(a => { return { text: `收集箱:${a.text}`, value: a.value } })]"
            />
            <uni-data-select
              v-model="SJX_SQ"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="神器"
              :localdata=" Array.from({ length: 6 }, (_, index) => {
                return { text: `神器${index}个`, value: index };
              })"
            />
            <uni-data-select
              v-model="SJX_XY"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="稀有"
              :localdata=" Array.from({ length: 6 }, (_, index) => {
                return { text: `稀有${index}个`, value: index };
              })"
            />
          </view>

          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="JTQY"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="晶体契约"
              :localdata="[{ text: '晶体契约:无', value: 0 }, ...JTQY_list.map(a => { return { text: `晶体契约:${a.text}`, value: a.value } })]"
            />
          </view>

          <view class="flex items-center justify-center inner-item">
            <uni-data-select
              v-model="MCZBK"
              dark
              class="flex-1 mr-5px"
              :clear-icon="false"
              placeholder="名称装扮卡"
              :localdata="[{ text: '名称装扮卡:无', value: 0 }, ...MCZBK_list.map(a => { return { text: `名称装扮卡:${a.text}`, value: a.value } })]"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.detail-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: #000;

  .detail-item {
    margin-top: 8px;
    width: 100%;

    &:first-child {
      margin-top: 0;
    }

    .detail-title {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: linear-gradient(to top, #1b120b, #413124);
      color: #dbbf94;
      font-size: 14px;
    }

    .detail-inner {
      border: 1px solid #413124;
      border-top: none;
      padding: 8px 12px;
      width: calc(100% - 26px);

      .inner-item {
        display: flex;
        width: 100%;

        &:not(:first-child) {
          margin-top: 12px;
        }

        .text-tips {
          width: 50px;
          line-height: 35px;
          margin-right: 10px;
        }
      }

      .number-input {
        border: 1px solid #444;
        border-radius: 5px;
        width: calc(100% - 130px);
        display: inline-block;
        height: 33px;
        margin-left: 8px;
        text-align: center;
        color: #aaa;
      }
    }
  }
}
.eq-panel {
  height: 215px;
  width: 320px;
  background-size: 100%;
  background-position: center;

  .eq-panel-inner {
    width: calc(100% - 25px);
    height: 100%;
    position: relative;
    left: 15px;
    top: 5px;

    .dfs-selector {
      position: absolute;
      bottom: 25px;
      left: 0;
      width: 120px;
    }
  }

  .eq-item-box {
    width: 42px;
    height: 42px;
    position: absolute;

    &.fwq {
      transform: scale(0.85);
    }

    .eq-icon-box {
      position: relative;
      display: inline-block;
      height: 34px;
      width: 34px;
      border: 1px solid #4a4a4a;
      background-color: rgba(0, 0, 0, 0.5);

      &.current {
        border: 1px solid #66aabb;
      }
    }

    .eq-pos-label {
      position: absolute;
      top: 0;
      left: 2px;
      font-size: 12px;
      text-align: center;
      line-height: 36px;
      width: 30px;
      height: 30px;
      color: #6a6a6a;
      overflow: hidden;
    }

    .eq-pos-zf {
      position: absolute;
      top: -5px;
      right: 0;
      font-size: 13px;
      text-shadow: 0 0 10px #000;
      font-weight: 700;
      color: #ff00ff;

      &.is-qh {
        color: #66aabb;
      }
    }

    .eq-pos-lv {
      position: absolute;
      left: -3px;
      bottom: 4px;
      width: 100%;
      text-align: center;
      font-size: 12px;
      text-shadow: 0 0 10px #000;
      // font-weight: 700;

      &.lv1 {
        color: #8b7036;
      }

      &.lv50 {
        color: #975ad7;
      }

      &.lv80 {
        color: #ff00ff;
      }
    }
  }
}
</style>
